<template>
    <div>
        <div class="option_block">
            <el-row>
                <el-button type="success" icon="el-icon-circle-plus-outline" @click="addFormVisible = true">添加
                </el-button>
                <el-button type="primary" icon="el-icon-edit" @click="openEditDialog">修改</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="multiDelete">删除</el-button>
                <el-button type="warning" icon="el-icon-refresh-left" @click="multiRestore">恢复</el-button>
            </el-row>
        </div>
        <div class="content">
            <el-table id="table" v-loading="loading" :data="list" border empty-text="暂无数据"
                      style="width: 100%; margin-top: 20px">
                <el-table-column width="260" label="第一级">
                    <template slot-scope="scope">
                        <div class="child_item">
                            <el-checkbox name="parentId" :label="list[scope.$index].id" :key="list[scope.$index].id"
                                         :class="list[scope.$index].deletedAt ? 'danger-row' : ''">
                                {{list[scope.$index].name}}
                            </el-checkbox>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="第二级">
                    <template slot-scope="scope">
                        <div class="child_item">
                            <el-checkbox v-for="city in list[scope.$index].children" :data-pid="scope.row.id"
                                         name="parentId" :label="city.id" :key="city.id"
                                         :class="city.deletedAt ? 'danger-row' : ''">{{city.name}}
                            </el-checkbox>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="添加菜单" :visible.sync="addFormVisible" :close-on-click-modal="false" width="66%"
                   @open="openAddDialog">
            <el-form :model="addForm" :rules="rules" ref="addForm" label-width="88px">
                <el-form-item label="菜单名称" prop="name">
                    <el-input v-model="addForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="请求链接" prop="value">
                    <el-input v-model="addForm.value" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="模版地址" prop="component">
                    <el-input v-model="addForm.component" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单类型" prop="isHidden">
                    <el-radio-group v-model="addForm.isHidden" size="small">
                        <el-radio-button label="0">显示菜单</el-radio-button>
                        <el-radio-button label="1">隐藏菜单</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="父级菜单" prop="parentId">
                    <el-radio-group v-model="addForm.parentId" style="width:100%;">
                        <el-table v-loading="addLoading" :data="allList" border empty-text="暂无数据"
                                  style="width: 100%; margin-top: 20px">
                            <el-table-column width="160" label="顶级">
                                <template slot-scope="scope">
                                    <el-radio name="parentId" :label="scope.row.id" :key="scope.row.id">
                                        {{scope.row.name}}
                                    </el-radio>
                                </template>
                            </el-table-column>
                            <el-table-column label="第一级">
                                <template slot-scope="scope">
                                    <div class="child_item" v-for="second in allList[scope.$index].children"
                                         :key="second.id">
                                        <el-radio name="parentId" :label="second.id" :key="second.id">{{second.name}}
                                        </el-radio>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序" prop="order">
                    <el-input v-model="addForm.order" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="doAdd">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改菜单" :visible.sync="editFormVisible" :close-on-click-modal="false" width="66%">
            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="88px">
                <el-form-item label="菜单名称" prop="name">
                    <el-input v-model="editForm.name" name="name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="请求链接" prop="value">
                    <el-input v-model="editForm.value" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="模版地址" prop="component">
                    <el-input v-model="editForm.component" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单类型" prop="isHidden">
                    <el-radio-group v-model="editForm.isHidden" size="small">
                        <el-radio-button label="0">显示菜单</el-radio-button>
                        <el-radio-button label="1">隐藏菜单</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="父级菜单" prop="parentId">
                    <el-radio-group v-model="editForm.parentId" style="width:100%;">
                        <el-table v-loading="addLoading" :data="allList" border empty-text="暂无数据"
                                  style="width: 100%; margin-top: 20px">
                            <el-table-column width="230" label="顶级">
                                <template slot-scope="scope">
                                    <el-radio name="parentId" :label="scope.row.id" :key="scope.row.index">
                                        {{scope.row.name}}
                                    </el-radio>
                                </template>
                            </el-table-column>
                            <el-table-column width="770" label="第一级">
                                <template slot-scope="scope">
                                    <div class="child_item" v-for="second in allList[scope.$index].children"
                                         :key="second.id">
                                        <el-radio name="parentId" :label="second.id" :key="second.index">
                                            {{second.name}}
                                        </el-radio>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序" prop="order">
                    <el-input v-model="editForm.order" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="doUpdate">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                addFormVisible: false,
                editFormVisible: false,
                addForm: {isHidden: 0},
                editForm: {},
                loading: true,
                addLoading: true,
                list: [],
                allList: [],
                rules: {
                    name: [{required: true, message: "请输入菜单名称", trigger: 'blur'}],
                    isHidden: [{required: true, message: "请选择菜单状态", trigger: 'change'}],
                    parentId: [{required: true, message: "请选择父节点", trigger: 'change'}],
                },
            };
        },
        mounted() {
            this.init();
        },
        methods: {
            doUpdate() {
                const _this = this;
                _this.$confirm("确定修改此菜单吗?", "").then(function () {
                    axios.post(basePath + '/menus/update', _this.editForm).then(function (res) {
                        _this.$message({
                            message: res.msg,
                            type: (res.success ? 'success' : 'error')
                        });
                        if (res.success) {
                            //添加成功
                            _this.editFormVisible = false;
                            _this.editForm = {};
                            _this.loading = true;
                            _this.init();
                        }
                    });
                });
            },
            doAdd() {
                const _this = this;
                _this.$refs['addForm'].validate((valid) => {
                    if (valid) {
                        axios.post(basePath + '/menus/add', _this.addForm).then(function (res) {
                            _this.$message({
                                message: res.msg,
                                type: (res.success ? 'success' : 'error')
                            });
                            if (res.success) {
                                //添加成功
                                _this.addForm = {isHidden: 0};
                                _this.addFormVisible = false;
                                _this.loading = true;
                                _this.init();
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            openAddDialog() {
                const _this = this;
                _this.addLoading = true;
                //加载所有菜单
                _this.loadList(function (res) {
                    _this.allList = [];
                    _this.allList.push(res.data);
                    _this.addLoading = false;
                });
            },
            init() {
                const _this = this;
                _this.loadList(function (res) {
                    _this.list = res.data.children;
                    _this.loading = false;
                });
            },
            loadList(func) {
                axios.post(basePath + '/menus/list').then(func);
            },
            multiOption(state) {
                const _this = this;
                const ids = [];
                let msg = state === 1 ? "恢复" : "删除";
                if (document.getElementById('table').getElementsByClassName('is-checked el-checkbox').length < 1) {
                    return this.$message.error("请选择要" + msg + "的菜单");
                }
                let request_path = state === 1 ? '/menus/restore' : '/menus/delete';
                _this.$confirm("确定要" + msg + "选中的菜单吗?", "").then(function () {
                    let checks = document.getElementById('table').getElementsByClassName('is-checked el-checkbox');
                    for (let i = 0; i < checks.length; i++) {
                        ids.push(checks[i].getElementsByTagName('input')[0].value);
                    }
                    axios.post(basePath + request_path, {ids: ids}).then(function (res) {
                        _this.$message({
                            message: res.msg,
                            type: res.success ? 'success' : 'error'
                        });
                        if (res.success) {
                            _this.loading = true;
                            _this.init();
                        }
                    });
                });
            },
            multiRestore() {
                this.multiOption(1);
            },
            multiDelete() {
                this.multiOption(0);
            },
            openEditDialog() {
                const _this = this;
                if (document.getElementById('table').getElementsByClassName('is-checked el-checkbox').length === 1) {
                    const id = document.getElementById('table').getElementsByClassName('is-checked el-checkbox')[0].getElementsByTagName('input')[0].value;
                    _this.addLoading = true;
                    //加载所有菜单
                    _this.loadList(function (res) {
                        _this.allList = [];
                        _this.allList.push(res.data);
                        _this.addLoading = false;
                    });
                    axios.get(basePath + '/menus/info/' + id).then(function (res) {
                        if (res.success) {
                            _this.editForm = res.data;
                            _this.editFormVisible = true;
                        } else {
                            _this.$message.error(res.msg);
                        }
                    });
                } else {
                    _this.$message.error('只能单条修改');
                }
            }
        }
    }
</script>

<style scoped>

</style>
